<%@page pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/prelude.jsp"%>
<%@taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<%@taglib prefix="math" uri="/WEB-INF/tld/math.tld"%>

<tags:layout title="写真一覧" pageId="/photos/list${not empty requestScope.RETOUCHING_BY_ME ? '/retouching_by_me' : ''}">
  <style type="text/css">
    @import "${pageContext.request.contextPath}/css/pc/photos/list.css";
  </style>
  <form>
    <fieldset>
      <legend>検索オプション</legend>
      <div class="fieldContain">
        <label for="placeList">避難所:</label>
        <select id="placeList" name="place">
          <option value=""></option>
          <c:forEach var="place" items="${it.places}">
            <option value="${place.id}" ${place.id == it.selectedPlaceId ? 'selected' : ''}>${place.number}</option>
          </c:forEach>
        </select>
      </div>
      <div class="fieldContain">
        <label for="ownerList">持ち主:</label>
        <select id="ownerList" name="owner">
          <option value=""></option>
          <c:forEach var="owner" items="${it.owners}">
            <option value="${owner.id}" ${owner.id == it.selectedOwnerId ? 'selected' : ''}>${owner.number}</option>
          </c:forEach>
        </select>
      </div>
      <div class="fieldContain">
        <label for="albumList">アルバム:</label>
        <select id="albumList" name="album">
          <option value=""></option>
          <c:forEach var="album" items="${it.albums}">
            <option value="${album.id}" ${album.id == it.selectedAlbumId ? 'selected' : ''}>${album.number}</option>
          </c:forEach>
        </select>
      </div>
      <div class="fieldContain">
        <label for="statusList">状態</label>
        <select id="statusList" name="status">
          <option value=""></option>
          <option value="ORIGINAL" ${it.status == 'ORIGINAL' ? 'selected' : ''}>オリジナル</option>
          <option value="RETOUCHING" ${it.status == 'RETOUCHING' ? 'selected' : ''}>レタッチ中</option>
          <option value="RETOUCHED" ${it.status == 'RETOUCHED' ? 'selected' : ''}>レタッチ済み</option>
          <option value="RETOUCHING_BY_ME" ${it.status == 'RETOUCHING_BY_ME' ? 'selected' : ''}>あなたがレタッチ中</option>
          <option value="RETOUCHED_BY_ME" ${it.status == 'RETOUCHED_BY_ME' ? 'selected' : ''}>あなたがレタッチ済み</option>
        </select>
      </div>
      <div class="fieldContain">
        <label for="updateList">登録日</label>
        <select id="updateList" name="order">
          <option value="0" ${it.order == '0' ? 'selected' : ''}>古いもの順</option>
          <option value="1" ${it.order == '1' ? 'selected' : ''}>新しいもの順</option>
        </select>
      </div>
      <noscript>
        <button>検索</button>
      </noscript>
    </fieldset>
    <c:set var="countOfPhotos" value="${fn:length(it.photos)}"/>
    <c:set var="colCount" value="5"/>
    <c:set var="rowCount" value="${math:ceil(countOfPhotos / colCount)}"/>
    <c:if test="${it.user.administrator}">
      <input id="deleteButton" type="submit" value="選択した画像を削除">
    </c:if>
    <div class="samples">
      色の説明:
      <div class="sample original">レタッチ前</div>
      <div class="sample retouching">レタッチ中</div>
      <div class="sample retouched ">レタッチ済</div>
    </div>
    <table id="photoList">
      <c:forEach var="row" begin="0" end="${rowCount gt 0 ? rowCount - 1 : 0}">
        <tr>
          <c:forEach var="col" begin="0" end="${colCount gt 0 ? colCount - 1 : 0}">
            <c:set var="index" value="${row * colCount + col}"/>
            <c:choose>
              <c:when test="${index < countOfPhotos}">
                <c:set var="photo" value="${it.photos[index]}"/>
                <td align="center" class="${fn:toLowerCase(photo.status)}">
                  <div>
                    <a href="${pageContext.request.contextPath}/photos/detail.html?id=${photo.id}">
                      <img class="photo" src="${pageContext.request.contextPath}/photos/${photo.id}?size=S">
                    </a>
                    <dl class="uploadedAt">
                      <dt>登録日時:</dt>
                      <dd>
                        <fmt:formatDate value="${photo.uploadedAt}" pattern="yy/MM/dd HH:mm"/>
                      </dd>
                    </dl>
                  </div>
                  <c:if test="${it.user.administrator}">
                    <input type="checkbox" name="photoIds" value="${photo.id}">
                  </c:if>
                </td>
              </c:when>
              <c:otherwise>
                <td>&nbsp;</td>
              </c:otherwise>
            </c:choose>
          </c:forEach>
        </tr>
      </c:forEach>
    </table>
  </form>
  <c:if test="${it.maxPage gt 1}">
    <div class="pager">
      <fmt:formatNumber value="${it.totalResults}"/>件中 <fmt:formatNumber value="${it.startIndex + 1}"/>件から<fmt:formatNumber value="${it.startIndex + fn:length(it.photos)}"/>件を表示
      <c:forEach var="i" begin="1" end="${it.maxPage}">
        <c:choose>
          <c:when test="${i eq it.currentPage}">
            <c:out value="${i}"/>
          </c:when>
          <c:otherwise>
            <c:set var="href" value="${pageContext.request.contextPath}/photos/list.html?page=${i}&amp;limit=${it.limit}&amp;${it.queryParam}"/>
            <a href="${href}"><c:out value="${i}"/></a>
          </c:otherwise>
        </c:choose>
      </c:forEach>
    </div>
  </c:if>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/view/pc/photos/list.js"></script>
</tags:layout>

